<template>
  <div class="mine" id="nav-bar">
    <van-nav-bar title="我的" class="primary_nav" />
    <img
      class="dextroversion"
      src="../../assets/images/pageList/dbt.png"
      alt=""
    />
    <div class="message" @click="$router.push('/pageList/personalDetails')">
      <img src="../../assets/images/personal.png" alt="" />
      <div class="characters">
        <span class="uname">姓名:{{ userInfo.name }}</span>
        <span class="xh">学号:{{ userInfo.userId }}</span>
      </div>
    </div>

    <div class="details">
      <van-cell
        center
        v-for="(item, index) of settingList"
        :key="index"
        :title="item.title"
        :icon="item.icon"
        @click="$router.push(item.path)"
      >
        <template #right-icon>
          <van-icon name="arrow" />
        </template>
      </van-cell>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      settingList: [
        {
          title: "文件申请记录",
          icon: require("@/assets/images/iconpng/icon/file.png"),
          image: require("@/assets/images/iconpng/icon/icon_more you 2.png"),
          path: "/pageList/documentRecord",
        },
        // {
        //   title: "邮箱设置",
        //   icon: require("@/assets/images/iconpng/icon/email.png"),
        //   image: require("@/assets/images/iconpng/icon/icon_more you 2.png"),
        //   path: "/pageList/mailboxSettings",
        // },
      ],
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/navbar.scss";
@import "@/assets/styles/variable.scss";
#nav-bar ::v-deep .van-nav-bar__title{
		color: #fff;
    font-size: .506667rem /* 19/37.5 */;
  }
.mine {
  position: relative;
  padding: 0 0.4rem /* 15/37.5 */ 0.266667rem /* 10/37.5 */;
  .dextroversion {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -10;
  }
  .message {
    display: flex;
    margin-top: .5rem;
    img {
      width: 1.306667rem /* 49/37.5 */;
      height: 1.306667rem /* 49/37.5 */;
      border-radius: 50%;
    }
    .characters {
      display: flex;
      flex-direction: column;
      color: #fff;
      margin-left: 0.466667rem /* 17.5/37.5 */;
      .uname {
        font-size: 0.506667rem +$fontsize/* 19/37.5 */;
        margin-bottom: 0.24rem /* 9/37.5 */;
        font-weight: 500;
      }
      .xh {
        font-size: 0.346667rem +$fontsize/* 13/37.5 */;
      }
    }
  }
  .details {
    margin-top: 0.7rem;
    border-radius: 0.266667rem /* 10/37.5 */;
    overflow: hidden;
    .van-icon__image {
      width: 0.666667rem /* 25/37.5 */;
      height: 0.666667rem /* 25/37.5 */;
      margin-right: 0.266667rem /* 10/37.5 */;
    }
    .van-cell {
      padding: 0.533333rem /* 20/37.5 */ 0.426667rem /* 16/37.5 */;
      font-size: .453333rem /* 17/37.5 */;
    }
  }
}
</style>
